<template>
    <div>
        <div class="head">
            <img src="../../../static/img/shop/_订单.png">
            <div >我的订单</div>
        </div>
        <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="orderExaminationId"
                label="订单编号"
                width="160"    
            >
            </el-table-column>
            <el-table-column
                prop="orderInfo"
                label="订单名称"
                width="130"
                >
            </el-table-column>
            <el-table-column
                prop="orderCreateTime"
                label="订单生成时间"
                width="170"
                >
            </el-table-column>
            <el-table-column
                prop="orderAllPay"
                label="总支付"
                width="90"
                >
            </el-table-column>
            <el-table-column
                prop="orderProOrCom"
                label="类别"
                width="130"
                :filters="[{ text: '项目', value: 1 }, { text: '套餐', value: 2 }]"
                :filter-method="filterTag2"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.orderProOrCom === 1 ? 'primary' : 'success'"
                        disable-transitions>
                        <div v-if="scope.row.orderProOrCom === 1">项目</div>
                        <div v-if="scope.row.orderProOrCom === 2">套餐</div>
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="orderStatus"
                label="状态"
                width="130"
                :filters="[{ text: '待确认', value: 1 }, { text: '进行中', value: 2 },{text:'已完成',value:3}]"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <div v-if="scope.row.orderStatus === 1"><el-tag type="warning">待确认</el-tag></div>
                        <div v-if="scope.row.orderStatus === 2"><el-tag type="success">进行中</el-tag></div>
                        <div v-if="scope.row.orderStatus === 3"><el-tag type="info">已完成</el-tag></div>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="lookDetail(scope.row)" type="text" size="small">查看检导单</el-button>
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="体检详情"
                width="350"
                >
                <template slot-scope="scope"> 
                    <el-button @click="xiaojie(scope.row)" type="success" size="small" plain>项目小结</el-button>
                    <el-button @click="zongjie(scope.row)" type="warning" size="small" plain>项目总结</el-button>
                    <el-button @click="report(scope.row)" type="danger" size="small" plain>体检报告浏览</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- Table -->
        <el-dialog title="体检小结" :visible.sync="dialogTableVisible" width="80%">
            <el-table :data="gridData">
                <el-table-column property="id" type="index" label="序号" :start="1" width="70"></el-table-column>
                <el-table-column property="projectName" label="名称" width="120"></el-table-column>
                <el-table-column property="cyDepartment.departmentName" label="科室" width="100"></el-table-column>
                <el-table-column property="cyAdmin.adminName" label="体检医生"></el-table-column>
                <el-table-column label="体检小结">  
                    <template slot-scope="scope">  
                        <el-tooltip  
                        class="item"  
                        effect="dark"  
                        :content="scope.row.visitDoctorSummary"  
                        placement="top"  
                        >  
                        <span class="ellipsis">{{ scope.row.visitDoctorSummary }}</span>  
                        </el-tooltip>  
                    </template>  
                </el-table-column>             
                <el-table-column property="visitPrescript" label="开药"></el-table-column>
                <el-table-column property="updateTime" label="体检时间"></el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog title="体检总结" :visible.sync="dialogTableVisible2" width="80%">
            <el-table :data="gridData2">
                <el-table-column property="id" type="index" label="序号" :start="1" width="70"></el-table-column>
                <el-table-column property="cyAdmin.adminName" label="体检医生" width="100"></el-table-column>
                <el-table-column label="体检总结">  
                    <template slot-scope="scope">  
                        <el-tooltip  
                        class="item"  
                        effect="dark"  
                        :content="scope.row.visitSummary"  
                        placement="top"  
                        >  
                        <span class="ellipsis">{{ scope.row.visitSummary }}</span>  
                        </el-tooltip>  
                    </template>  
                </el-table-column>             
                <el-table-column property="visitUpdateTime" label="总结时间" width="160"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[],
            dialogTableVisible: false,
            dialogTableVisible2: false,
            gridData:[],
            gridData2:[],
        }
    },
    created(){
        this.getAllOrder();
    },
    methods:{
        getAllOrder(){
            this.$axios.get(
                '/order/getAllOrder',
                {
                    params:{
                        patientId:this.$store.state.patientId,
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    this.tableData = res.data
                    console.log(this.tableData)
                }
            })
        },
        filterTag(value, row) {
            return row.orderStatus === value;
        },
        filterTag2(value, row) {
            return row.orderProOrCom === value;
        },
        lookDetail(row){
            localStorage.setItem("guidanceSheet",JSON.stringify(row));
            this.$router.push('/guidanceSheet')
        },
        xiaojie(row){
            this.dialogTableVisible = true
            // 获取订单小结，将值传进去
            this.$axios.get(
                "/patient/xiaojie",{
                    params:{
                        id:row.orderExaminationId
                    }
                }
            ).then(res=>{
                this.gridData = res.data
            })
        },
        zongjie(row){
            this.dialogTableVisible2 = true
            this.$axios.get(
                "/patient/zongjie",{
                    params:{
                        id:row.orderExaminationId
                    }
                }
            ).then(res=>{
                this.gridData2 = res.data
                console.log(this.gridData2)
            })
        },
        report(row){
            localStorage.setItem("reportInfo",JSON.stringify(row))
            this.$router.push("/report")
        }
    }
}
</script>
<style scoped>
.head{
    margin: 10px 0 10px 20px;
    
}
.head img{
    float: left;
    width: 45px;
}
.head div{
    float: left;
    font-family: 'STXingkai', Courier, monospace;
    font-size: 34px;
    color: rgb(8, 201, 104);
}
.ellipsis {  
  display: inline-block;  
  max-width: 100%; /* 或者你需要的具体宽度 */  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  vertical-align: middle;  
}  
</style>